<script lang="ts" setup>
import { ref } from 'vue';
import { useDataScreenListStore } from '@/store/modules/dcp/enginee_certification/dataScreenList';

const loading = ref<boolean>(false);
const allData = ref<any[]>([]);
const engineerInfo = ref<any[]>([]);
const data = ref<any[]>([]);
const flag = ref<string>('0');
const total = ref<number>(0);
const noTotal = ref<number>(0);
const cTotal = ref<number>(0);
const cNoTotal = ref<number>(0);
const cLackTotal = ref<number>(0);
const pLackTotal = ref<number>(0);
const eLackTotal = ref<number>(0);
const columns: any = [
  {
    title: '单位',
    dataIndex: 'company',
    key: 'company',
    align: 'center',
    width: '300px',
  },
  {
    title: '人员编码',
    dataIndex: 'personnelCode',
    key: 'personnelCode',
    align: 'center',
    width: '100px',
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    width: '100px',
  },
  {
    title: '研发通用级别',
    dataIndex: 'rdCommonLevel',
    key: 'rdCommonLevel',
    align: 'center',
    width: '180px',
  },
  {
    title: '研发专业级别',
    dataIndex: 'rdProfessionLevel',
    key: 'rdProfessionLevel',
    align: 'center',
    width: '180px',
  },
  {
    title: '研发经验级别',
    dataIndex: 'rdExperienceLevel',
    key: 'rdExperienceLevel',
    align: 'center',
    width: '150px',
  },
  {
    title: '研发工程师认证级别',
    dataIndex: 'engineerLevel',
    key: 'engineerLevel',
    align: 'center',
    width: '150px',
  },
];
// 公司
const company = ref<any[]>([]);
const companySelectedIndex = ref<number | null>(null);
const companyButtons = ref<any[]>([
  { label: '中国电信股份有限公司绍兴分公司(本部)', type: 'default', shape: 'round' },
  { label: '中国电信股份有限公司柯桥分公司', type: 'default', shape: 'round' },
  { label: '中国电信股份有限公司上虞分公司', type: 'default', shape: 'round' },
  { label: '中国电信股份有限公司诸暨分公司', type: 'default', shape: 'round' },
  { label: '中国电信股份有限公司嵊州分公司', type: 'default', shape: 'round' },
  { label: '中国电信股份有限公司新昌分公司', type: 'default', shape: 'round' },
]);
function companyToggleType(index: number) {
  if (companySelectedIndex.value === index) {
    companyButtons.value[index].type = 'default';
    companySelectedIndex.value = null;
  }
  else {
    for (let i = 0; i < companyButtons.value.length; i++) {
      if (i === index) {
        companyButtons.value[i].type = 'primary';
      }
      else {
        companyButtons.value[i].type = 'default';
      }
    }
    companySelectedIndex.value = index;
  }
}
// 通用
const common = ref<any[]>([]);
const commonSelectedIndex = ref<number | null>(null);
const commonButtons = ref<any[]>([
  { label: 'L1', type: 'default', shape: 'circle' },
  { label: 'L2', type: 'default', shape: 'circle' },
  { label: 'L3', type: 'default', shape: 'circle' },
  { label: '无', type: 'default', shape: 'circle' },
]);
function commonToggleType(index: number) {
  if (commonSelectedIndex.value === index) {
    commonButtons.value[index].type = 'default';
    commonSelectedIndex.value = null;
  }
  else {
    for (let i = 0; i < commonButtons.value.length; i++) {
      if (i === index) {
        commonButtons.value[i].type = 'primary';
      }
      else {
        commonButtons.value[i].type = 'default';
      }
    }
    commonSelectedIndex.value = index;
  }
}
// 专业
const profession = ref<any[]>([]);
const professionSelectedIndex = ref<number | null>(null);
const professionButtons = ref<any[]>([
  { label: 'L1', type: 'default', shape: 'circle' },
  { label: 'L2', type: 'default', shape: 'circle' },
  { label: 'L3', type: 'default', shape: 'circle' },
  { label: '无', type: 'default', shape: 'circle' },
]);
function professionToggleType(index: number) {
  if (professionSelectedIndex.value === index) {
    professionButtons.value[index].type = 'default';
    professionSelectedIndex.value = null;
  }
  else {
    for (let i = 0; i < professionButtons.value.length; i++) {
      if (i === index) {
        professionButtons.value[i].type = 'primary';
      }
      else {
        professionButtons.value[i].type = 'default';
      }
    }
    professionSelectedIndex.value = index;
  }
}
// 经验
const experience = ref<any[]>([]);
const experienceSelectedIndex = ref<number | null>(null);
const experienceButtons = ref<any[]>([
  { label: 'L1', type: 'default', shape: 'circle' },
  { label: 'L2', type: 'default', shape: 'circle' },
  { label: 'L3', type: 'default', shape: 'circle' },
  { label: '无', type: 'default', shape: 'circle' },
]);
function experienceToggleType(index: number) {
  if (experienceSelectedIndex.value === index) {
    experienceButtons.value[index].type = 'default';
    experienceSelectedIndex.value = null;
  }
  else {
    for (let i = 0; i < experienceButtons.value.length; i++) {
      if (i === index) {
        experienceButtons.value[i].type = 'primary';
      }
      else {
        experienceButtons.value[i].type = 'default';
      }
    }
    experienceSelectedIndex.value = index;
  }
}
// 认证
const engineer = ref<any[]>([]);
const engineerSelectedIndex = ref<number | null>(null);
const engineerButtons = ref<any[]>([
  { label: 'L1', type: 'default', shape: 'circle' },
  { label: 'L2', type: 'default', shape: 'circle' },
  { label: 'L3', type: 'default', shape: 'circle' },
  { label: '无', type: 'default', shape: 'circle' },
]);
function engineerToggleType(index: number) {
  if (engineerSelectedIndex.value === index) {
    engineerButtons.value[index].type = 'default';
    engineerSelectedIndex.value = null;
  }
  else {
    for (let i = 0; i < engineerButtons.value.length; i++) {
      if (i === index) {
        engineerButtons.value[i].type = 'primary';
      }
      else {
        engineerButtons.value[i].type = 'default';
      }
    }
    engineerSelectedIndex.value = index;
  }
}
// 获取条件
function getPrimaryButtonLabels(buttons: any[]) {
  return buttons.filter(button => button.type === 'primary').map(button => button.label);
}
// 监听变化
watch(
  () => companyButtons.value,
  () => {
    company.value = getPrimaryButtonLabels(companyButtons.value);
    getData();
    cTotal.value = allData.value.filter((item: any) => item.company === company.value[0]).length;

    cNoTotal.value = cTotal.value - total.value;
  },
  { deep: true },
);
watch(
  () => commonButtons.value,
  () => {
    common.value = getPrimaryButtonLabels(commonButtons.value);
    getData();
  },
  { deep: true },
);
watch(
  () => professionButtons.value,
  () => {
    profession.value = getPrimaryButtonLabels(professionButtons.value);
    getData();
  },
  { deep: true },
);
watch(
  () => experienceButtons.value,
  () => {
    experience.value = getPrimaryButtonLabels(experienceButtons.value);
    getData();
  },
  { deep: true },
);
watch(
  () => engineerButtons.value,
  () => {
    engineer.value = getPrimaryButtonLabels(engineerButtons.value);
    getData();
  },
  { deep: true },
);
async function getAllData() {
  loading.value = true;
  await useDataScreenListStore().getData();
  allData.value = useDataScreenListStore().getAllData();
  loading.value = false;
}
function getData() {
  loading.value = true;
  engineerInfo.value = allData.value;
  // 获取条件
  if (company.value.length !== 0) {
    company.value.forEach((item: any) => {
      engineerInfo.value = useDataScreenListStore().getDataByNameAndLevel(engineerInfo.value, '单位', item, 'company');
    });
  }
  if (common.value.length !== 0) {
    common.value.forEach((item: any) => {
      engineerInfo.value = useDataScreenListStore().getDataByNameAndLevel(engineerInfo.value, '研发通用', item, 'rdCommonLevel');
    });
  }
  if (profession.value.length !== 0) {
    profession.value.forEach((item: any) => {
      engineerInfo.value = useDataScreenListStore().getDataByNameAndLevel(engineerInfo.value, '研发专业', item, 'rdProfessionLevel');
    });
  }
  if (experience.value.length !== 0) {
    experience.value.forEach((item: any) => {
      engineerInfo.value = useDataScreenListStore().getDataByNameAndLevel(engineerInfo.value, '研发经验', item, 'rdExperienceLevel');
    });
  }
  if (engineer.value.length !== 0) {
    engineer.value.forEach((item: any) => {
      engineerInfo.value = useDataScreenListStore().getDataByNameAndLevel(engineerInfo.value, '研发工程师', item, 'engineerLevel');
    });
  }
  total.value = engineerInfo.value.length;
  noTotal.value = allData.value.length - total.value;
  cNoTotal.value = cTotal.value - total.value;
  loading.value = false;
}
function updateData() {
  loading.value = true;
  if (flag.value === '0') {
    data.value = engineerInfo.value;
  }
  else if (flag.value === '1') {
    const engineerInfoSet = new Set(engineerInfo.value.map(item => JSON.stringify(item)));
    data.value = allData.value.filter(item => !engineerInfoSet.has(JSON.stringify(item)));
  }
  else if (flag.value === '2') {
    data.value = allData.value.filter((item: any) => item.company === company.value[0]);
  }
  else if (flag.value === '3') {
    const all = allData.value.filter((item: any) => item.company === company.value[0]);
    const engineerInfoSet = new Set(engineerInfo.value.map(item => JSON.stringify(item)));
    data.value = all.filter(item => !engineerInfoSet.has(JSON.stringify(item)));
  }
  loading.value = false;
}
watch(
  () => engineerInfo.value,
  () => {
    updateData();
  },
  { deep: true },
);
watch(
  () => flag.value,
  () => {
    updateData();
  },
  { deep: true },
);
onMounted(async () => {
  flag.value = '0';
  await getAllData();
  getData();
  cLackTotal.value = allData.value.filter((item: any) => item.isRdCommon === 0).length;
  pLackTotal.value = allData.value.filter((item: any) => item.isRdProfession === 0).length;
  eLackTotal.value = allData.value.filter((item: any) => item.rdExperienceLevel === '研发经验L0').length;
});
</script>

<template>
  <div class="max">
    <div class="select-container">
      <div class="select-item">
        <label for="select-person">研发通用认证级别:</label>
        <a-space>
          <a-button
            v-for="(button, index) in commonButtons" :key="index" :shape="button.shape" :type="button.type"
            @click="commonToggleType(index)"
          >
            {{ button.label }}
          </a-button>
        </a-space>
      </div>
      <div class="select-item">
        <label for="select-person2">研发专业认证级别:</label>
        <a-space>
          <a-button
            v-for="(button, index) in professionButtons" :key="index" :shape="button.shape" :type="button.type"
            @click="professionToggleType(index)"
          >
            {{ button.label }}
          </a-button>
        </a-space>
      </div>
      <div class="select-item">
        <label for="select-person3">研发经验级别:</label>
        <a-space>
          <a-button
            v-for="(button, index) in experienceButtons" :key="index" :shape="button.shape" :type="button.type"
            @click="experienceToggleType(index)"
          >
            {{ button.label }}
          </a-button>
        </a-space>
      </div>
      <div class="select-item">
        <label for="select-person4">研发工程师认证级别:</label>
        <a-space>
          <a-button
            v-for="(button, index) in engineerButtons" :key="index" :shape="button.shape" :type="button.type"
            @click="engineerToggleType(index)"
          >
            {{ button.label }}
          </a-button>
        </a-space>
      </div>
    </div>
    <div class="select-container">
      <div class="select-item" style="margin-right: 40px;margin-left: 40px;">
        <!-- <label for="select-person">单位:</label> -->
        <div>
          <a-button
            v-for="(button, index) in companyButtons" :key="index" :type="button.type" style="margin: 5px;"
            @click="companyToggleType(index)"
          >
            {{ button.label }}
          </a-button>
        </div>
      </div>
    </div>
    <div>
      <a-radio-group v-model:value="flag" button-style="solid">
        <a-radio-button value="0">
          符合条件人数(<span>{{
            total
          }}</span>人)
        </a-radio-button>
        <a-radio-button value="1">
          不符合条件人数(总人数)(<span>{{
            noTotal }}</span>人)
        </a-radio-button>
        <a-radio-button v-if="company.length !== 0" value="2">
          总人数(单位)(<span>{{
            cTotal
          }}</span>人)
        </a-radio-button>
        <a-radio-button v-if="company.length !== 0" value="3">
          不符合条件人数(单位)(<span>{{
            cNoTotal
          }}</span>人)
        </a-radio-button>
      </a-radio-group>
    </div>
    <div class="content" style="margin-top: 20px;">
      <a-table :columns="columns" :data-source="data" row-key="id" class="d-table" :loading="loading" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.max {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  max-height: 95%;
  overflow: auto;

  .header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    background-color: #fff;

    .pjTitle {
      padding-left: 15px;
      background: url("@/assets/images/title-left-bg.svg") no-repeat;
    }

    .right {
      display: flex;
      align-items: center;
    }
  }
}

.select-container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  /* 根据需要调整间距 */
  justify-content: space-between;
  max-width: 100%;
  margin-bottom: 20px;
}

.select-item {
  display: flex;
  flex-grow: 1;
  align-items: center;
  width: calc(24% - 10px);
  /* 减去间距，使得每个项宽度相等 */
}

.select-item label {
  margin-right: 8px;
  /* 在标签和下拉菜单之间添加一些间距 */
  white-space: nowrap;
  /* 防止标签换行 */
}

.select-item .ant-select {
  flex-grow: 1;
}

.search-button {
  margin-left: auto;
  /* 将按钮推向最右边 */
}
</style>
